<template>
  <div class="sdefault">
    <div class="sr-flex">
      <el-card class="df-card">
        <div class="card-flex">
          <div class="personage">
            <div class="logo-box">
              <div
                class="logo"
                :style="{ 'background-image': `url(${logo.people})` }"
              ></div>
            </div>
            <p class="name">人物：{{ searchPeople.people }}</p>
          </div>
          <SContent
            :contentInfo="peopleInfo"
            @clickDetail="clickDetail"
          ></SContent>
          <!-- <ul class="list">
            <li v-for="(item, index) in peopleInfo" :key="index">
              <p class="date">{{ item.time }}</p>
              <ul class="content">
                <li
                  class="text"
                  v-for="(citem, idx) in item.opinion"
                  :key="idx"
                  v-html="citem"
                  @click="clickDetail(item.news_id)"
                ></li>
              </ul>
              <p v-html="item.opinion" class="text" @click="clickDetail(item.news_id)"></p>
            </li>
          </ul> -->
        </div>
      </el-card>
    </div>
    <div class="sr-flex">
      <el-card class="df-card">
        <div class="card-flex">
          <div class="topic">
            <div class="logo-box">
              <div
                class="logo"
                :style="{ 'background-image': `url(${logo.topic})` }"
              ></div>
            </div>
            <p class="name">话题：{{ searchTopic.topicLabel }}</p>
          </div>
          <SContent
            :contentInfo="topicInfo"
            @clickDetail="clickDetail"
          ></SContent>
          <!-- <ul class="list">
            <li v-for="(item, index) in topicInfo" :key="index">
              <p class="date">{{ item.time }}</p>
              <ul class="content">
                <li
                  class="text"
                  v-for="(citem, idx) in item.opinion"
                  :key="idx"
                  v-html="citem"
                  @click="clickDetail(item.news_id)"
                ></li>
              </ul>
              <p
                v-html="item.opinion"
                class="text"
                @click="clickDetail(item.news_id)"
              ></p>
            </li>
          </ul> -->
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    searchPeople: {
      type: Object,
      default: () => {
        return {};
      },
    },
    peopleInfo: {
      type: Array,
      default: () => {
        return [];
      },
    },
    searchTopic: {
      type: Object,
      default: () => {
        return {};
      },
    },
    topicInfo: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      logo: {
        people: require("./zjh.jpg"),
        topic: require("./ssw.jpg"),
      },
    };
  },
  created() {
    this.initDate();
  },
  methods: {
    initDate() {},
    clickDetail(item) {
      this.$emit("gotoDetail", item);
    },
  },
  components: {
    SContent: () => import("./content.vue"),
  },
};
</script>
<style lang="scss" scoped>
.sdefault {
  position: relative;
  display: flex;
  .sr-flex {
    width: calc((100% - 10px) / 2);
    margin-right: 10px;
    &:last-of-type {
      margin-right: 0;
    }
  }
  .df-card {
    position: relative;
    width: 100%;
    // padding: 0.2rem 0;
    min-height: calc(100vh - 0.7rem - 2.62rem - 20px);
    height: 100%;
    // min-height: 300px;
    box-sizing: border-box;
    ::v-deep {
      .el-card__body {
        padding-left: 0;
      }
    }
  }
  .card-flex {
    position: relative;
    display: flex;
    width: 100%;
    .personage,
    .topic {
      width: 200px;
      text-align: center;
      .name {
        line-height: 0.4rem;
        padding: 0 0.1rem;
        font-size: 0.22rem;
        font-weight: 400;
        text-align: center;
        color: #333;
      }
    }
    .personage {
      .logo-box {
        position: relative;
        width: 60%;
        max-width: 150px;
        margin: 0 auto 0.2rem;
        .logo {
          position: relative;
          width: 100%;
          padding-top: 100%;
          border: 1px solid rgb(153, 153, 153);
          border-radius: 50%;
          box-sizing: border-box;
          box-shadow: rgba(0, 0, 0, 0.35) 1px 1px 5px 0px;
          background-position: center center;
          background-repeat: no-repeat;
          background-size: cover;
          &:before {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .topic {
      .logo-box {
        position: relative;
        width: 70%;
        margin: 0 auto 0.2rem;
        .logo {
          position: relative;
          width: 100%;
          padding-top: 50%;
          border: 1px solid rgb(153, 153, 153);
          border-radius: 6px;
          box-sizing: border-box;
          background-position: center center;
          background-repeat: no-repeat;
          background-size: cover;
          &:before {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    // .list {
    //   width: calc(60% - 0.2rem);
    //   padding-left: 0.2rem;
    //   border-left: 1px solid rgba(199, 227, 246, 1);
    //   margin-bottom: 0.1rem;
    //   li {
    //     position: relative;
    //     .date {
    //       display: inline-block;
    //       line-height: 0.16rem;
    //       padding: 0.04rem 0.08rem;
    //       margin-bottom: 0.1rem;
    //       font-size: 0.14rem;
    //       // color: #333;
    //       background-color: rgba(199, 227, 246, 1);
    //     }
    //     .text {
    //       position: relative;
    //       width: 100%;
    //       line-height: 0.2rem;
    //       text-indent: 0.1rem;
    //       font-size: 0.14rem;
    //       color: #333;
    //       word-wrap: break-word;
    //       word-break: break-all;
    //       cursor: pointer;
    //       margin-bottom: 0.1rem;
    //       &:before {
    //         position: absolute;
    //         top: calc(0.1rem - 2px);
    //         left: 0;
    //         width: 4px;
    //         height: 4px;
    //         border-radius: 50%;
    //         background-color: #333;
    //         content: "";
    //       }
    //     }
    //   }
    // }
  }
}
</style>